{extend name="main"}
{block name="body"}
<div class="bg-white p-3 row mr-0 ml-0">
	<div class="col-12 col-sm-6">
		<el-divider class="mb-5" content-position="left" v-if="Logform.type && is_edit">编辑管理员信息</el-divider>

		<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px" :label-position="labelPosition">

		  <el-form-item label="角色" prop="role_id">
		    <el-select v-model="form.role_id" placeholder="请选择">
		      <el-option
		        v-for="item in role"
		        :key="item.rid"
		        :label="item.title"
		        :value="item.rid">{{item.title}}
		      </el-option>
		    </el-select>
		  </el-form-item>

		  <el-form-item label="头像" prop="headimg">
			<el-image
			  	v-if="form.headimg" 
			    style="width: 80px; height: 80px"
			    lazy
			    class="rounded-circle mr-2"
			    :src="form.headimg" 
			    :preview-src-list="[form.headimg]">
			</el-image>
		  	  <el-upload
				  class="avatar-uploader"
				  action="/uploadFiles"
				  name="file"
				  accept="image/*"
				  :data="{path:'admin/headimg'}"
				  :show-file-list="false"
				  :on-success="handleAvatarSuccess"
				  :on-error="handleAvatarError">
		  			<el-button size="small" type="primary">选择文件</el-button>
			  </el-upload>
		  </el-form-item>

		  <el-form-item label="昵称" prop="nickname">
		    <el-input v-model="form.nickname" class="col-12 col-sm-4 pl-0 pr-0" placeholder="Name"></el-input>
		  </el-form-item>

		  <el-form-item label="账号" prop="username">
		    <el-input v-model="form.username" class="col-12 col-sm-4 pl-0 pr-0" placeholder="UserName"></el-input>
		  </el-form-item>

		  <el-form-item label="密码" :prop="is_edit?'':'password'">
		    <el-input v-model="form.password" class="col-12 col-sm-4 pl-0 pr-0" :placeholder="is_edit?'Password,不填则不修改':'Password'"></el-input>
		  </el-form-item>

		  <el-form-item label="工作日" prop="allow_week">
		    <el-checkbox-group v-model="form.allow_week">
		      <el-checkbox label="0">星期日</el-checkbox>
		      <el-checkbox label="1">星期一</el-checkbox>
		      <el-checkbox label="2">星期二</el-checkbox>
		      <el-checkbox label="3">星期三</el-checkbox>
		      <el-checkbox label="4">星期四</el-checkbox>
		      <el-checkbox label="5">星期五</el-checkbox>
		      <el-checkbox label="6" >星期六</el-checkbox>
		    </el-checkbox-group>
		  </el-form-item>

		  <el-form-item label="允许登录时间段">
			  	<el-slider
			  	 class="col-12 pl-0 pr-0"
			      v-model="allow_time"
			      range
			      show-stops
			      :max="23">
			    </el-slider>
		  </el-form-item>

		  <el-form-item label="状态" prop="status">
		    <el-radio-group v-model="form.status">
		      <el-radio :label="1">启用[默认]</el-radio>
		      <el-radio :label="0">禁用</el-radio>
		    </el-radio-group>
		  </el-form-item>

		  <el-form-item label="手机号" prop="mobile">
		    <el-input v-model="form.mobile" class="col-12 col-sm-4 pl-0 pr-0" placeholder="Mobile"></el-input>
		  </el-form-item>

		  <el-form-item label="邮箱" prop="email">
		    <el-input v-model="form.email" class="col-12 col-sm-4 pl-0 pr-0" placeholder="Email"></el-input>
		  </el-form-item>

		  <el-form-item label="其他联系方式" prop="other_contact">
		    <el-input type="textarea" v-model="form.other_contact" class="col-12 col-sm-4 pl-0 pr-0" placeholder="QQ:123456"></el-input>
		    <p class="small">ps:每行一种联系方式</p>
		  </el-form-item>

		  <el-form-item label="其他联系方式" prop="other_img">
			<el-image
			  	v-if="form.other_img" 
			    style="width: 120px; height: 120px"
			    lazy
			    class="mr-2"
			    :src="form.other_img" 
			    :preview-src-list="[form.other_img]">
			</el-image>
		  	  <el-upload
				  class="avatar-uploader"
				  action="/uploadFiles"
				  name="file"
				  accept="image/*"
				  :data="{path:'admin/other_img'}"
				  :show-file-list="false"
				  :on-success="handleAvatarSuccess"
				  :on-error="handleAvatarError">
		  			<el-button size="small" type="primary">选择文件</el-button>
			  </el-upload>
		  </el-form-item>

		  <el-form-item label="默认顾问" prop="adviser_default">
		    <el-radio-group v-model="form.adviser_default">
		      <el-radio :label="0">否[默认]</el-radio>
		      <el-radio :label="1">是</el-radio>
		    </el-radio-group>
		  </el-form-item>

		  <el-form-item label="Openid" prop="openid">
		    <el-input v-model="form.openid" class="col-12 col-sm-4 pl-0 pr-0" placeholder="Openid"></el-input>
		    <p class="small">1:用户》用户管理》微信用户》公众号Openid</p>
		    <p class="small">2:用户关注公众号》发送：“openid”关键词》复制返回的字符串（openid）</p>
		  </el-form-item>

		  <el-form-item>
		    <el-button type="primary" @click="submitForm('form')">立即保存</el-button>
		    <el-button @click="resetForm('form')">重置</el-button>
		  </el-form-item>
		</el-form>
	</div>
	<div class="col-12 col-sm-6" v-if="Logform.type">
		<el-divider class="mb-5" content-position="left" v-if="Logform.type=='login'">登录日志</el-divider>
		<el-divider class="mb-5" content-position="left" v-if="Logform.type=='log'">操作日志</el-divider>
		<div class="table-responsive">
			<el-table
		      	:data="LoginLog"
	    		stripe
	    		v-loading="Logform.ajax"
	    		style="width: 100%;"
	    		v-if="Logform.type==='login'">
		      <el-table-column
		        prop="create_time"
		        label="登录时间"
		        width="180">
		      </el-table-column>
		      <el-table-column
		        label="登录设备"
		        width="100">
			      <template slot-scope="scope">
			      	{{scope.row.is_mobile ? '手机':'Pc'}}
			      </template>
		      </el-table-column>
		      <el-table-column
		        prop="ip"
		        label="登录IP"
		        width="180">
		      </el-table-column>
		      <el-table-column
		        prop="user_agent"
		        label="User-Agent">
		      </el-table-column>
		    </el-table>
			<el-table
		      	:data="Log"
	    		stripe
	    		v-loading="Logform.ajax"
	    		style="width: 100%;"
	    		v-if="Logform.type==='log'">
		      <el-table-column
		        prop="create_time"
		        label="时间"
		        width="180">
		      </el-table-column>
		      <el-table-column
		        prop="l_title"
		        label="操作"
		        width="180">
		      </el-table-column>
		      <el-table-column
		        prop="l_ip"
		        label="Ip"
		        width="180">
		      </el-table-column>
		      <el-table-column
		        prop="l_route"
		        label="Url"
		        min-width="300">
		      </el-table-column>
		      <el-table-column
		        prop="l_param"
		        label="Param"
		        min-width="300">
		      </el-table-column>
		    </el-table>
		</div>
		<div class="table-responsive py-3">
			<el-pagination
			  background
			  @current-change="getAdminLog"
		      :current-page="Logform.page"
		      :page-size="Logform.per_page"
		      layout="total,  prev, pager, next, jumper"
		      :total="Logform.total">
		    </el-pagination>
		</div>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="role"}
	var role=[];
	{else/}
	var role={:json_encode($role,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="Find"}
	var url='/addAdmin';
	var is_edit=false;
	var formData={
			role_id:'',
			headimg:'',
			nickname:'',
			username:'',
			password:'',
			allow_week:['1','2','3','4','5'],
			allow_time_start:8,
			allow_time_end:18,
			status:1,
			mobile:'',
			email:'',
			other_contact:'',
			other_img:'',
			adviser_default:0,
			openid:'',
		};
	{else/}
	var url='/editAdmin/{$Find.id}';
	var is_edit=true;
	var formData={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			role: role,
			labelPosition:'right',
			is_edit:is_edit,
			allow_time:[formData.allow_time_start,formData.allow_time_end],
			form:formData,
		    Logform:{
		    	type: '',
		    	ajax:false,
				id: formData.id,
				per_page:0,
				total:0,
				page: 1
		    },
		    LoginLog: [],
		    Log: [],
		    rules: {
		      role_id: [
		        { required: true, message: '请选择权限等级', trigger: 'blur' },
		      ],
		      nickname: [
		        { required: true, message: '请输入名称', trigger: 'blur' },
		        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
		      ],
		      username: [
		        { required: true, message: '请设置账号', trigger: 'blur' },
		        { min: 6, max: 25, message: '长度在 6 到 25 个字符', trigger: 'blur' }
		      ],
		      password: [
		        { required: true, message: '请设置密码', trigger: 'blur' },
		        { min: 6, max: 25, message: '长度在 6 到 25 个字符', trigger: 'blur' }
		      ],
		      allow_week: [
	            { type: 'array', required: true, message: '请至少选择一天', trigger: 'change' }
	          ],
	          status: [
	            { required: true, message: '请选择状态', trigger: 'change' }
	          ],
		    }
		},
		watch:{
		    view:XYBase.viewWatch,
			allow_time(val, oldVal){
				this.form.allow_time_start=val[0];
				this.form.allow_time_end=val[1];
			}
		},
		created(){
			XYBase.created(this);
		},
		methods:{
			handleAvatarSuccess:function(res, file) {
				if(res){
					if(res.code === 0){
						if(res.data.type == 'admin/headimg'){
							this.form.headimg=res.data.path;
						}else if(res.data.type == 'admin/other_img'){
							this.form.other_img=res.data.path;
						}
						XYBase.success(res.msg);
					}else{XYBase.error(res.msg);}
				}else{XYBase.error(XYBase.config.system_network_error)}
			},
			handleAvatarError:function(res, file) {
	          	XYBase.error(XYBase.config.system_network_error)
			},
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					$.ajax({
						url:url,
						data:D,
						type:'post',
						dataType:'json',
						success:function(ret){
					        loading.close();
					        if (ret) {
								if(ret.code == 0){
									XYBase.success(ret.msg);
									if(!_this.is_edit){
										_this.resetForm(formName);
									}
								}else{
									XYBase.msg(ret.msg);
								}
					        }else{
				          		XYBase.error(XYBase.config.system_network_error)
					        }
						},
						error:function(err){
					        loading.close();
				          	XYBase.error(XYBase.config.system_network_error)
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
			getAdminLog:function(val){
				var _this=this;
				if(val) _this.Logform.page=val;
				_this.Logform.ajax=true;
				$.get('/getAdminLog',_this.Logform,function(ret){
					_this.Logform.ajax=false;
					if (ret) {
						if(ret.code == 0){
							_this.Logform.per_page=ret.data.per_page;
							_this.Logform.total=ret.data.total;
							switch(_this.Logform.type){
								case 'login':
								_this.LoginLog=ret.data.data;
								break;
								case 'log':
								_this.Log=ret.data.data;
								break;
							}
						}else{
							XYBase.msg(ret.msg);
						}
					}else{
			          	XYBase.error(XYBase.config.system_network_error)
					}
				});
			}
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
	var locHash=location.hash;
	if(locHash){
		switch(locHash){
			case '#LoginLog':
			vm.Logform.type='login';
			vm.getAdminLog();
			break;
			case '#Log':
			vm.Logform.type='log';
			vm.getAdminLog();
			break;
		}
	}
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}